import Vue from 'vue'
import { TableColumn, Pagination, Checkbox, Select, FormItem } from "element-ui";
import { UTable, UTableColumn } from 'umy-ui'
import langZh from './lang/zh.js'
import langEn from './lang/en.js'

export default {
    install: function (Vue, option) {
        const isZh = window.siteHeaders?.language === 'CN'
        const curSiteLang = window.localStorage.getItem('language')
        if (curSiteLang) {
            window.$AONE_LAN = curSiteLang == 'zh_CN' ? langZh : langEn
        }
        else {
            window.$AONE_LAN = isZh || !window.siteHeaders ? langZh : langEn
        }
        /**
         * 使表格头默认值string改为可以传VNode
         * node_modules\element-ui\packages\table\src\table-column.js
         */
        TableColumn.props.label = String | Object
        UTableColumn.props.label = String | Object
        FormItem.props.label = String | Object
        Vue.use(FormItem)
        /**
         * 第一列标狗勾选框增加 全选二字
         */
        const oldSetColumnRenders = UTableColumn.methods.setColumnRenders
        UTableColumn.methods.setColumnRenders = function (column) {
            const oldColumn = oldSetColumnRenders.bind(this)(column)
            const oldRenderHeader = column.renderHeader
            oldColumn.renderHeader = function (h, scope) {
                const oldHeader = oldRenderHeader.bind(this)(h, scope)
                return column.type == 'selection' ? <span>{oldHeader} {$AONE_LAN.selectAll}</span> : oldHeader
            }
            return oldColumn
        }
        Vue.use(UTableColumn)
        Vue.use(TableColumn)

        /**
         * 表格头改变默认点击事件，默认点击表头会排序，去掉默认行为，改为点击表头整列变色
         */
        let preColumn = null
        UTable.components.ElTable.components.TableHeader.methods.handleHeaderClick = function (event, column) {
            if (preColumn) {
                preColumn.labelClassName = ""
                preColumn.className = ""
            }
            column.labelClassName = "blue-bgcolor"
            column.className = "blue-bgcolor"
            preColumn = column
            this.$parent.$emit('header-click', column, event);
        }
        /**
         * 表格头排序重写，直接请求接口
         */
        // UTable.components.ElTable.components.TableHeader.methods.handleSortClick = function (event, column, givenOrder) {
        //     console.log(event, column, givenOrder)
        //     this.$parent.$emit('sort-change', {
        //         column,
        //         prop:column.property,
        //         order
        //     });
        // }
        /**
         * 表格tooltip位置原本是定到cell的，太高了，调下靠近内容
         */
        const oldHandleCellMouseEnter = UTable.components.ElTable.components.TableBody.methods.handleCellMouseEnter
        UTable.components.ElTable.components.TableBody.methods.handleCellMouseEnter = function (event, row) {
            oldHandleCellMouseEnter.bind(this)(event, row)
            const tooltip = this.$refs.tooltip
            const { cell } = this.table.hoverState
            if (tooltip.referenceElm === cell) {
                tooltip.referenceElm = cell.querySelector('.anoe-table-cell')
            }
        }
        Vue.use(UTable)

        /**
         * Pagination 重写render方法 扩展增加首页和尾页按钮
         */
        const paginationRender = Pagination.render
        delete Pagination.render
        Object.assign(Pagination, {
            mixins: [
                ...(Pagination.mixins || []),
                {
                    components: {
                        Top: {
                            render(h) {
                                return (
                                    <button
                                        type="button"
                                        class="btn-prev"
                                        disabled={this.$parent.disabled || this.$parent.internalCurrentPage <= 1}
                                        on-click={this.$parent.topClick}>
                                        {
                                            this.$parent.topText
                                                ? <span>{this.$parent.topText}</span>
                                                : <i class="el-icon el-icon-d-arrow-left"></i>
                                        }
                                    </button>
                                );
                            }
                        },

                        Bottom: {
                            render(h) {
                                return (
                                    <button
                                        type="button"
                                        class="btn-next"
                                        disabled={this.$parent.disabled || this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0}
                                        on-click={this.$parent.bottomClick}>
                                        {
                                            this.$parent.bottomText
                                                ? <span>{this.$parent.bottomText}</span>
                                                : <i class="el-icon el-icon-d-arrow-right"></i>
                                        }
                                    </button>
                                );
                            }
                        },
                    },
                    methods: {
                        paginationRender: paginationRender,
                        topClick() {
                            if (this.disabled) return;
                            const newVal = 1;
                            this.internalCurrentPage = this.getValidCurrentPage(newVal);
                            this.$emit('top-click', this.internalCurrentPage);
                            this.emitChange();
                        },

                        bottomClick() {
                            if (this.disabled) return;
                            const newVal = this.internalPageCount;
                            this.internalCurrentPage = this.getValidCurrentPage(newVal);
                            this.$emit('bottom-click', this.internalCurrentPage);
                            this.emitChange();
                        },
                    },
                    render(h) {
                        const template = this.paginationRender(h)
                        // 找到prev节点，插入top节点
                        const prevIndex = template.children.findIndex(it => it.componentOptions.tag == "prev")
                        if (prevIndex > -1) {
                            template.children.splice(prevIndex, 0, <top></top>);
                        }
                        // 找到next节点，插入bottom节点
                        const nextIndex = template.children.findIndex(it => it.componentOptions.tag == "next")
                        if (nextIndex > -1) {
                            template.children.splice(nextIndex + 1, 0, <bottom></bottom>);
                        }
                        return template
                    }
                }
            ]
        })
        Vue.use(Pagination)

        /**
         * 下拉框多选时，鼠标放到tag上面也显示hover叉叉图标
         */
        Object.assign(Select, {
            mixins: [
                ...(Select.mixins || []),
                {
                    mounted() {
                        if (this.multiple) {
                            const elTags = this.$el.querySelector('.el-select__tags')
                            elTags.addEventListener('mouseenter',()=>{
                                this.inputHovering = true
                            })
                            elTags.addEventListener('mouseleave',()=>{
                                this.inputHovering = false
                            })
                        }
                    }
                }
            ]
        })
        Vue.use(Select)
    }
}